<template>
	<view>
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list" v-if="tabbarIndex === 0">
			<view class="list">
				<view class="onorder" v-if="allVideo.length==0">
					<image src="../../../static/img/noorder.png"></image>
					<view class="text">
						没有相关视频
					</view>
				</view>
				<view class="row" v-for="(row,index) in allVideo" :key="index">
					<view class="type" v-if="row.videoStatus==1 && row.videoApply==1">上架中</view>
					<view class="type" v-if="row.videoStatus==0 && row.videoApply==0">审核中</view>
					<view class="type" v-if="row.videoApply==2">审核失败</view>
					<view class="type" v-if="row.videoStatus==0 && row.videoApply==1">已下架</view>
					<view class="order-info">
						<view class="up">
							<video :src="row.videoAddress"></video>
						</view>	
						<view class="down">
							<view class="name">
								{{row.videoIntroduce}}
							</view>
							<view class="spec">{{row.videoKeyword}}</view>
							<view class="price-number">
								<view class="price">播放量:{{row.videoPlay}}</view>
								<view class="price">收藏量:{{row.videoCollect}}</view>
								<view class="price">点赞量:{{row.videoPraise}}</view>
							</view>
						</view>
					</view>
					<view class="btns">
						<block v-if="row.videoStatus==1 && row.videoApply==1"><view class="pay" @tap="cancelOrder(row)">下架	</view></block>
						<block v-if="row.videoApply==0"><view class="default">审核中</view></block>
						<block v-if="row.videoApply==2"><view class="default">审核失败</view></block>
						<block v-if="row.videoStatus==0 && row.videoApply==1"><view class="default">已下架</view></block>
					</view>
				</view>
			</view>
		</view>
		<view class="order-list" v-if="tabbarIndex === 1">
			<view class="list">
				<view class="onorder" v-if="onTheShelf.length==0">
					<image src="../../../static/img/noorder.png"></image>
					<view class="text">
						没有相关视频
					</view>
				</view>
				<view class="row" v-for="(row,index) in onTheShelf" :key="index">
					<view class="order-info">
						<view class="up">
							<video :src="row.videoAddress"></video>
						</view>	
						<view class="down">
							<view class="name">
								{{row.videoIntroduce}}
							</view>
							<view class="spec">{{row.videoKeyword}}</view>
							<view class="price-number">
								<view class="price">播放量:{{row.videoPlay}}</view>
								<view class="price">收藏量:{{row.videoCollect}}</view>
								<view class="price">点赞量:{{row.videoPraise}}</view>
							</view>
						</view>
					</view>
					<view class="btns">
						<block v-if="row.videoStatus==1 "><view class="pay" @tap="cancelOrder(row)">下架</view></block>
						<block v-if="row.videoStatus==0 "><view class="default">已下架</view></block>
					</view>
				</view>
			</view>
		</view>
		<view class="order-list" v-if="tabbarIndex === 2">
			<view class="list">
				<view class="onorder" v-if="offTheShelf.length==0">
					<image src="../../../static/img/noorder.png"></image>
					<view class="text">
						没有相关视频
					</view>
				</view>
				<view class="row" v-for="(row,index) in offTheShelf" :key="index">
					<view class="type" v-if="row.videoStatus==0 && row.videoApply==2">审核失败</view>
					<view class="type" v-if="row.videoStatus==0 && row.videoApply==1">已下架</view>
					<view class="type" v-if="row.videoStatus==0 && row.videoApply==0">审核中</view>
					<view class="order-info">
						<view class="up">
							<video :src="row.videoAddress"></video>
						</view>	
						<view class="down">
							<view class="name">
								{{row.videoIntroduce}}
							</view>
							<view class="spec">{{row.videoKeyword}}</view>
							<view class="price-number">
								<view class="price">播放量:{{row.videoPlay}}</view>
								<view class="price">收藏量:{{row.videoCollect}}</view>
								<view class="price">点赞量:{{row.videoPraise}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-list" v-if="tabbarIndex === 3">
			<view class="list">
				<view class="onorder" v-if="underReview.length==0">
					<image src="../../../static/img/noorder.png"></image>
					<view class="text">
						没有相关视频
					</view>
				</view>
				<view class="row" v-for="(row,index) in underReview" :key="index">
					<view class="type">审核中</view>
					<view class="order-info">
						<view class="up">
							<video :src="row.videoAddress"></video>
						</view>	
						<view class="down">
							<view class="name">
								{{row.videoIntroduce}}
							</view>
							<view class="spec">{{row.videoKeyword}}</view>
							<view class="price-number">
								<view class="price">播放量:{{row.videoPlay}}</view>
								<view class="price">收藏量:{{row.videoCollect}}</view>
								<view class="price">点赞量:{{row.videoPraise}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
		
</template>
<script>
	export default {
		data() {
			return {
				headerPosition:"fixed",
				headerTop:"0px",
				orderType: ['全部','上架中','未上架','审核中'],
				//订单列表 演示数据
				allVideo:[],
				onTheShelf:[],
				offTheShelf:[],
				underReview:[],
				tabbarIndex:0,
				page: 1,
				limit: 2,
				videoApply: -1,
				videoStatus:-1,
				loadingFlag:false,//判断是否继续上拉加载数据
				status: 'more'//加载状态
			};
		},
		onPullDownRefresh() {
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		onLoad(option) {
			// let tbIndex = parseInt(option.tbIndex);
			// this.tabbarIndex = tbIndex;
			this.getAllVideo();
			//兼容H5下排序栏位置
			// #ifdef H5
				let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						clearInterval(Timer);//清除定时器
					}
				},1);
			// #endif
		},
		onReachBottom() {
		            if(this.loadingFlag===true){
		                  this.status = 'more';
						  this.loadingFlag=false;
		                  this.getMoreVideos();
						  return
		            }
					if(this.loadingFlag===false){
						this.loadingFlag=true;
						if(page !== 1){
							this.page--;
						}
						this.getMoreVideos();
						return
					}
		      },
		methods: {
			showType(tbIndex){
				this.tabbarIndex = tbIndex;
				this.page = 1;
				this.loadingFlag=false;
				if(this.tabbarIndex === 0){
					this.videoApply = -1;
					this.videoStatus = -1;
					if(this.allVideo.length === 0){
						this.getAllVideo();
					}
				}
				if(this.tabbarIndex === 1){
					this.videoApply = 1;
					this.videoStatus = 1;
					if(this.onTheShelf.length === 0){
						this.getOnTheShelfVideo();
					}
					
				}
				if(this.tabbarIndex === 2){
					this.videoApply = -1;
					this.videoStatus = 0;
					if(this.offTheShelf.length === 0){
					this.getOffTheShelfVideo();
					}
				}
				if(this.tabbarIndex === 3){
					this.videoApply = 0;
					this.videoStatus = 0;
					if(this.underReview.length === 0){
					this.getUnderReviewVideo();
					}
				}
			},
			getAllVideo(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$req.quaryDietitianAllVideo(this.page,this.limit,this.videoApply,this.videoStatus).then(res=>{
					if(res === false){
						uni.showToast({title: '网络连接超时',icon:"none"});
						return
					}
					if(res[0] != null){
						this.allVideo = res;	
					}
				})
			},
			getOnTheShelfVideo(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$req.quaryDietitianAllVideo(this.page,this.limit,this.videoApply,this.videoStatus).then(res=>{
					if(res === false){
						uni.showToast({title: '网络连接超时',icon:"none"});
						return
					}
					if(res[0] != null){
						this.onTheShelf = res;	
					}
				})
			},
			getOffTheShelfVideo(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$req.quaryDietitianAllVideo(this.page,this.limit,this.videoApply,this.videoStatus).then(res=>{
					if(res === false){
						uni.showToast({title: '网络连接超时',icon:"none"});
						return
					}
					if(res[0] != null){
						this.offTheShelf = res;	
					}
				})
			},
			getUnderReviewVideo(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$req.quaryDietitianAllVideo(this.page,this.limit,this.videoApply,this.videoStatus).then(res=>{
					if(res === false){
						uni.showToast({title: '网络连接超时',icon:"none"});
						return
					}
					if(res[0] != null){
						this.underReview = res;	
					}
				})
			},
			cancelOrder(row){
				uni.showModal({
					title: '下架视频',
					content: '确定下架此视频？',
					success: (res)=>{
						if (res.confirm) {
							this.doCancelOrder(row.videoId);
						} else if (res.cancel) {
						}
					}
				});
			},
			doCancelOrder(videoId){
				this.$req.offShelfVideo(videoId).then(res=>{
					if(res == true){
						this.allVideo = [];
						this.offTheShelf = [];
						this.onTheShelf = [];
						this.getOnTheShelfVideo();
					}
				})
			},
			getMoreVideos(){
			                uni.showLoading({
			                	title: '加载中...',
								mask: true
			                })
							this.page++;
			                this.$req.quaryDietitianAllVideo(this.page,this.limit,this.videoApply,this.videoStatus).then(res=>{
									uni.hideLoading();
									if(res === false){
										uni.showToast({title: '网络连接超时',icon:"none"});
										this.page--;
										return
									}
									if(res.length === 0){
										uni.showToast({title: '已经加载全部',icon:"none"});
										this.page--;
										return
									}
									if(this.tabbarIndex === 0){
										this.allVideo = this.allVideo.concat(res);
									}
									if(this.tabbarIndex === 1){
										this.onTheShelf = this.onTheShelf.concat(res);
									}
									if(this.tabbarIndex === 2){
										this.offTheShelf = this.offTheShelf.concat(res);
									}
									if(this.tabbarIndex === 3){
										this.underReview = this.underReview.concat(res);
									}
									this.loadingFlag=true;
			                        uni.stopPullDownRefresh();
			                })
			            },
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f3f3f3;
}
.topTabBar{
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #f8f8f8;
	height: 80upx;
	display: flex;
	justify-content: space-around;
	.grid{
		width: 20%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #444;
		font-size: 28upx;
		.text{
			height: 76upx;
			display: flex;
			align-items: center;
			&.on{
				color: #f06c7a;
				border-bottom: solid 4upx #f06c7a;
			}
		}
		
	}
}
.order-list{
	margin-top: 80upx;
	padding-top: 20upx;
	width: 100%;
	.list{
		width: 94%;
		margin: 0 auto;
		.onorder{
			width: 100%;
			height: 50vw;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			image{
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
			.text{
				width: 100%;
				height: 60upx;
				font-size: 28upx;
				color: #444;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.row{
			width: calc(100% - 40upx);
			padding: 10upx 20upx;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 20upx;
			.type{
				font-size: 26upx;
				color: #ec652f;
				height: 50upx;
				display: flex;
				align-items: center;
			}
			.order-info{
				width: 100%;
				display: flex;
				flex-direction: column;
				.up{
					flex-shrink: 0;
					width: 100%;
					height: 50vw;
					video{
						width: 100%;
						height: 50vw;
						border-radius: 10upx;
					}
				}
				.down{
					width: 100%;
					margin-left: 10upx;
					position: relative;
					.name{
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.spec{
						color: #a7a7a7;
						font-size: 22upx;

					}
					.price-number{
						width: 100%;
						display: flex;
						justify-content: space-between;
						font-size: 22upx;
						color: #333;
						display: flex;
						align-items: flex-end;
						.price{
							font-size: 24upx;
							margin-right: 5upx;
						}
						
					}
				}
			}
			.detail{
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				height: 60upx;
				font-size: 26upx;
				.sum{
					padding: 0 8upx;
					display: flex;
					align-items: flex-end;
					.price{
						font-size: 30upx;
					}
				}
				
			}
			.btns{
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				view{
					min-width: 120upx;
					height: 50upx;
					padding: 0 20upx;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28upx;
					margin-left: 20upx;
				}
				.default{
					border: solid 1upx #ccc;
					color: #666;
				}
				.pay{
					border: solid 1upx #ec652f;
					color: #ec652f;
				}
			}
		}
	}
}
</style>
